<template>
  <div class="main">
    <div class="Newlist">
      <div class="Wrapper">
        <div class="title">{{ detail.title }}</div>
        <div class="Article">{{ parseTime(detail.releaseTime) }}</div>
      </div>
      <div class="content" v-html="detail.content">
      </div>
    </div>
    <!-- 新闻列表 -->
    <div class="right">
      <div class="news-img"><img src="@/assets/images/teaching/mkds.png"></div>
      <div class="news-img"><img src="@/assets/images/teaching/ewm.png"></div>
    </div>
    <!-- 右侧内容 -->
  </div>
</template>

<script setup lang="ts">
import { useCounterStore } from "@/store/modules/counter.ts";
import {useRoute, useRouter} from "vue-router";

import {getHostDetail} from "@/api/hot/hot";
import { parseTime} from '@/utils/util'
const counterStore = useCounterStore();
const route = useRouter();
const routeInfo = useRoute();

const detail =ref({});
function goPath(path) {
  route.push(path);
}


function loadData() {
  try {
    getHostDetail({
      newsId:routeInfo.query.id,
    }).then(res => {
      detail.value= res.value
    })

  } catch (error) {
    console.error("加载数据失败", error);
  }
}

const heightImg = ref("0px");

onMounted(() => {
  loadData();
  updateHeight();
  window.addEventListener("resize", updateHeight);
});
onUnmounted(() => {
  window.removeEventListener("resize", updateHeight);
});

function updateHeight() {
  const browserWidth = window.innerWidth > 1200 ? window.innerWidth : 1200;
  // 浏览器图片高度 = 图片高度 / 图片宽度 * 浏览器图片宽度
  heightImg.value = `${(1182 / 3840) * browserWidth}px`;
}
</script>

<style lang="scss" scoped>
.main {
  width: 1154px;
  margin: 0 auto;
  padding: 105px 0 50px;
  color: #111f2c;
  display: flex;
  flex-wrap: wrap;
  .top{
    width: 100%;
    height: 46px;
    margin-bottom: 24px;
    img{
      height: 100%;
    }
  }
  .Newlist{
    display: inline-block;
    vertical-align: top;
    width: 792px;
    margin-right: 64px;
    .Wrapper{
      margin-bottom: 40px;
      border-bottom: 1px solid rgba(17, 31, 44, .12);
      .title{
        line-height: 56px;
        font-size: 40px;
        color: #111f2c;
        letter-spacing: 0;
        font-weight: 500;
      }
      .Article{
        height: 20px;
        margin: 16px 0;
        line-height: 20px;
        font-size: 14px;
        color: rgba(17, 31, 44, .56);
        display: -moz-box;
        display: flex;
        -moz-box-align: center;
        align-items: center;
      }
    }
    .content{
      min-height: 26px;
      font-size: 16px;
      color: rgba(17, 31, 44, .85);
      letter-spacing: 0;
      text-align: justify;
      line-height: 28px;
      font-weight: 400;
    }
  }
  .right{
    display: inline-block;
    vertical-align: top;
    width: 298px;
    .news-img{
      margin-bottom: 16px;
      width: 100%;
      img{
        width: 100%;
      }
    }
  }
}
</style>
<style>
body, html{
  font-family: PingFangSC, Microsoft YaHei, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
</style>
